/**
 * markdown 编辑器组件
 *
 * 使用
 *
 *  <Markdown value="" onChange= />
 */

import { Input } from "antd";
import { Component } from "react";
import * as marked from "marked";

interface IProps {
  value?: string;
  onChange?: (value: string) => void;
}

export default class Markdown extends Component<IProps> {
  handleChange = (event: any) => {
    const value = event.target.value;
    // 将 value 转换成 marked 格式，使用 marked 模块的 parse 方法
    const markedValue = marked.parse(value);
    console.log("value", value);
    console.log("markedValue", markedValue);
    // 调用父组件传递过来的 onChange 将转换之后的 markedValue 传递出去
    this.props.onChange?.(markedValue);
  };

  render() {
    return (
      <div style={{ width: "100%", height: 200 }}>
        <Input.TextArea rows={5} onChange={this.handleChange} />
      </div>
    );
  }
}
